<script setup lang="ts">
import {computed} from "vue";
import {
  LikeOutlined,
  UserOutlined,
  MessageOutlined,
  RocketOutlined
} from '@ant-design/icons-vue'
import {message} from "ant-design-vue";
import {loginConfigStore} from "@/store/user/loginConfigStore";
import {userConfigStore} from "@/store/user/userConfigStore";
import IsLoginUserInfo from "@/components/userInfoCard/isLoginUserCard/index.vue"

const isLogin = computed(() => userConfigStore().isLogin)

function login(){
  if (isLogin.value) {
    message.success("用户已登录")
    return
  }
  loginConfigStore().setLoginMessage(Math.random())
}
</script>

<template>
  <section class="loginOrUserInfo rounded-xl">
    <div class="userNoLogin" v-if="!isLogin">
      <a-card class="userInfoCard rounded-xl">
        <template #title>
          <span class="flex text-center w-full justify-center items-center">登录网站，开启您的思维碰撞</span>
        </template>
        <a-row class="flex justify-center gap-4">
          <a-col :span="10" class="text-base">
            <LikeOutlined />
            <span class="ml-2">更懂你的优质内容</span>
          </a-col>
          <a-col :span="10" class="text-base">
            <UserOutlined/>
            <span class="ml-2">更专业的大咖答主</span>
          </a-col>
          <a-col :span="10" class="text-base">
            <MessageOutlined/>
            <span class="ml-2">更深度的互动交流</span>
          </a-col>
          <a-col :span="10" class="text-base">
            <RocketOutlined/>
            <span class="ml-2">更高效的创作环境</span>
          </a-col>
          <a-col :span="24" class="flex justify-center text-center items-center">
            <a-button type="primary" class="w-48" @click="login">立即登录</a-button>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <IsLoginUserInfo v-if="isLogin"/>
  </section>
</template>

<style scoped lang="less">
:deep(.ant-card-head) {
  border-bottom: none;
}
.loginOrUserInfo{
  border: thin solid rgb(203 213 225);
}
</style>
